---
target: Umo Office Viewer
keywords: Umo Office Viewer,office在线预览,wps在线预览,docx在线预览,word在线预览,pdf在线预览
description: Umo Office Viewer 是一款 Office 文档查看器，支持在 Web 页面中查看 40 余种主流的办公文档。
---

# 事件列表

本节将介绍 Umo Office Viewer 的事件，通过事件可以监听 Umo Office Viewer 的完整生命周期以及状态的变化，进行更多操作。

## 示例

```vue {4-14}
<template>
  <umo-office-viewer
    v-bind="options"
    @loaded="onLoaded"
    @closed="onClosed"
    @aside-changed="onAsideChanged"
    @page-changed="onPageChanged"
    @rotate-changed="onRotateChanged"
    @scale-changed="onScaleChanged"
    @fullscreen-changed="onFullscreenChanged"
    @download="onDownload"
    @export="onExport"
    @print="onPrint"
    @error="onError"
  />
</template>
 
<script setup>
  import { ref } from 'vue';
  import { UmoOfficeViewer } from '@umoteam/office-viewer';

  const options = ref({
    // 配置项
    // ...
  });

  const onLoaded = () => {
    console.log('emit:loaded', '文档加载完成')
  }
  const onClosed = () => {
    console.log('emit:closed', '点击了关闭按钮')
  }
  const onAsideChanged = (aside: 'info' | 'thumbs') => {
    console.log('emit:aside-changed', '开启侧边栏并切换面板:', { aside })
  }
  const onPageChanged = (activePage: number) => {
    console.log('emit:page-changed', '当前页码变化:', { activePage })
  }
  const onRotateChanged = (rotate: number) => {
    console.log('emit:rotate-changed', '旋转角度发生变化:', { rotate })
  }
  const onScaleChanged = (scale: number) => {
    console.log('emit:scale-changed', '缩放比例变化:', {scale})
  }
  const onFullscreenChanged = (fullscreen: boolean) => {
    console.log('emit:fullscreen-changed', '全屏状态发生变化:',  { fullscreen })
  }
  const onDownload = () => {
    console.log('emit:download', '下载文档')
  }
  const onPrint = () => {
    console.log('emit:print', '打印文档')
  }
  const onExport = () => {
    console.log('emit:export', '导出文档')
  }
  const onError = (error) => {
    console.log('emit:error', '文档加载出错', { errMsg: error.message })
  }
</script>
```

## 事件说明

| 事件名称 | 触发时机 / 说明 | 可用参数 |
| --- | --- | --- |
| loaded | 文档加载完成 | - |
| closed | 点击标题栏关闭按钮并执行 `onClose()` 后 | - |
| aside-changed | 开启侧边栏并切换面板后 | aside |
| page-changed | 当前页码变化后，鼠标滚动或插件内部触发  | activePage |
| rotate-changed | 页面旋转角度变化后  | rotate |
| scale-changed | 页面缩放比例变化后  | scale |
| fullscreen-changed | 插件全屏状态切换后   | fullscreen |
| download | 下载文档  | - |
| export | 导出文档  | - |
| print | 打印文档  | - |
| error | 文档加载出错  | error |
